import React from 'react'
import { List,AutoSizer } from 'react-virtualized'

export default class ListExample extends React.Component {
  state = {
    list : [
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
      'Brian Vaughn',
    ]
  }
  rowRenderer = ({ key, index, isScrolling, isVisible, style }) => {
    const { list } = this.state
    return (
      <div key={key} style={style}>
        {/* 
          index :  索引
           isScrolling ：当前项是否正在滚动
           isVisible： 当前项再Llist 中是可见的
           style： 样式属性
        */}
        --{list[index]}--
      </div>
    )
  }
  render() {
    //   rowHeight={120} // 每一行的高度
    //  autoHeight // 设置高度为 WindowScroller 最终渲染的列表高度
      //              width={width} // 视口的宽度
        //            height={height} // 视口的高度
          //          rowCount={count} // List列表项的行数
            //        rowHeight={120} // 每一行的高度
              //      rowRenderer={this.renderHouseList} // 渲染列表项中的每一行
            


              const { list } = this.state   
    return (
      <AutoSizer> 
        {({ height, width }) => (
          <List width={width} height={800} rowCount={list.length} rowHeight={120} rowRenderer={this.rowRenderer} />
          )}
     </AutoSizer>
    )
  }
}
